<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT License. -->
<!-- This file shows how to design a first-run page that provides a welcome screen to the user about the features of the add-in. -->

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Contoso Task Pane Add-in</title>

    <!-- Office JavaScript API -->
    <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>

    <!-- For more information on Fluent UI, visit https://developer.microsoft.com/fluentui#/. -->
    <link rel="stylesheet" href="https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/office-ui-fabric-core/11.1.0/css/fabric.min.css"/>

    <!-- Template styles -->
    <link href="taskpane.css" rel="stylesheet" type="text/css" />
</head>

<body class="ms-font-m ms-welcome ms-Fabric ms-bgColor-white">
    <header class="ms-welcome__header ms-bgColor-white">
        <img width="90" height="90" src="../../assets/logo-filled.png" alt="Contoso" title="Contoso" />
    </header>
    <section id="sideload-msg" class="ms-welcome__main">
        <h2 class="ms-font-xl">Please <a target="_blank" href="https://learn.microsoft.com/office/dev/add-ins/testing/test-debug-office-add-ins#sideload-an-office-add-in-for-testing">sideload</a> your add-in to see app body.</h2>
    </section>
    <main id="app-body" class="ms-welcome__main ms-bgColor-white" style="display: none;">
        <h2 class="ms-font-xl"> Autorun for DLP</h2>
        <!--ul class="ms-List ms-welcome__features">
            <li class="ms-ListItem">
                <span class="ms-font-m">Non-Business</span>
                <span class="ms-font-m">The data is personal and not business related.</span>
            </li>
            <li class="ms-ListItem">
                <span class="ms-font-m">Public</span>
                <span class="ms-font-m">The data is for the public and shareable externally.</span>
            </li>
            <li class="ms-ListItem">
                <span class="ms-font-m">General</span>
                <span class="ms-font-m">Business data shared with trusted individuals.</span>
            </li>
            <li class="ms-ListItem">
                <span class="ms-font-m">Confidential</span>
                <span class="ms-font-m">Sensitive business data shared with trusted individuals.</span>
            </li>
            <li class="ms-ListItem">
                <span class="ms-font-m">High Confidential</span>
                <span class="ms-font-m">The data must be secret or in some way highly critical.</span>
            </li>
        </ul-->
        <p class="ms-font-l">Change the document Sensitive Level by clicking corresponding <b>Sensitivity Level</b>.</p>
        <div role="button" id="nonBusiness" class="ms-welcome__action ms-Button ms-Button--hero ms-font-xl" style="text-align:center">
            <span class="ms-Button-label" style="color:#737173">Non-Business</span>
            <br/>
            <span class="ms-font-nb">The data is personal and not business related.</span>
        </div>
        <div role="button" id="public" class="ms-welcome__action ms-Button ms-Button--hero ms-font-xl" style="text-align:center">
            <span class="ms-Button-label" style="color:#07641d">Public</span><br/>
            <span class="ms-font-p">The data is for the public and shareable externally.</span>
        </div>
        <div role="button" id="general" class="ms-welcome__action ms-Button ms-Button--hero ms-font-xl" style="text-align:center">
            <span class="ms-Button-label" style="color:#0177d3">General</span><br/>
            <span class="ms-font-g">Business data shared with trusted individuals.</span>
        </div>
        <div role="button" id="confidential" class="ms-welcome__action ms-Button ms-Button--hero ms-font-xl" style="text-align:center">
            <span class="ms-Button-label" style="color:#ff5c3a">Confidential</span><br/>
            <span class="ms-font-c">Sensitive business data shared with trusted individuals.</span>
        </div>
        <div role="button" id="highConfidential" class="ms-welcome__action ms-Button ms-Button--hero ms-font-xl" style="text-align:center">
            <span class="ms-Button-label" style="color:#f8334d">High Confidential</span><br/>
            <span class="ms-font-hc">The data must be secret or in some way highly critical.</span>
        </div>
        <p><label id="item-subject"></label></p>
    </main>
</body>

</html>
